<template>
    <div class="pad20">
        <div class="filter-container">
            <!--查询的表单数据-->
            <el-form :inline="true" :model="map" size="mini">
                <el-form-item label="课程名称:">
                    <el-input v-model.trim="map.title"></el-input>
                </el-form-item>
                <el-form-item label="上下架:">
                    <el-select v-model="map.status" class="auto-width" clearable filterable placeholder="上下架"
                        style="width: 85px">
                        <el-option v-for="item in opts.isPutawayList" :key="item.code" :label="item.desc"
                            :value="item.code">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button icon='el-icon-search' type="primary" @click="handleCheck">查询</el-button>
                    <el-button icon='el-icon-refresh' class="filter-item" @click="handleReset">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!--修改的弹出框-->
        <el-dialog title="修改" :visible.sync="visible" @close="closeCllback" width="70%">
            <el-form ref="formDataRef" :model="formData" label-width="100px">
                <el-form-item label="课程名称：">
                    <el-input v-model="formData.title"></el-input>
                </el-form-item>
                <el-form-item label="是否免费：">
                    <el-radio-group v-model="formData.price" v-if="formData.price != 0">
                        <el-radio :label="formData.price">收费</el-radio>
                        <el-radio :label="0.00">免费</el-radio>
                    </el-radio-group>
                    <el-radio-group v-model="formData.price" v-if="formData.price == 0">
                        <el-radio :label="1">收费</el-radio>
                        <el-radio :label="0.00">免费</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-row v-if="formData.price != 0">
                    <el-col :span="12">
                        <el-form-item label="原价：">
                            <el-input type="text" style="width: 120px" placeholder="请输入价格"
                                v-model="formData.price"></el-input> 元
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="课程简介:">
                    <quill-editor class="editor" v-model="formData.description" ref="myQuillEditor"
                        :options="editorOption">
                    </quill-editor>
                </el-form-item>
                <el-row style="margin-top:17px; ">
                    <el-button style="float:right;margin-left:6px;" size="mini" type="danger" plain
                        @click="visible = false">取 消</el-button>
                    <el-button style="float:right" size="mini" type="primary" @click="submitForm">确定</el-button>
                </el-row>
            </el-form>
        </el-dialog>
        <!--数据表格-->
        <el-table size="medium" :data="list" stripe border>
            <el-table-column type="index" label="序号" width="50">
            </el-table-column>
            <el-table-column prop="cover" label="课程封面" align="center" width="122">
                <template slot-scope="scope">
                    <img :src="scope.row.cover" :alt="scope.row.title" width="100" height="60">
                </template>
            </el-table-column>
            <el-table-column prop="title" label="课程名称" align="center" width="230">
            </el-table-column>>
            <el-table-column label="课程分类" align="center" prop="subjectName">

            </el-table-column>
            <el-table-column label="价格" prop="price" width="150" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.price !== 0">原价：{{ parseFloat(scope.row.price).toFixed(2) }}<br></span>
                    <span v-else>免费</span>
                </template>
            </el-table-column>
            <el-table-column width="150" prop="status" label="上下架" align="center">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.status" @change="handleChangeIsPutaway(scope.row.id, scope.row.status)"
                        active-value="Draft" inactive-value="Normal" active-color="#ff4949" inactive-color="#13ce66"
                        active-text="下架" inactive-text="上架">
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="100" align="center">
                <template slot-scope="scope">
                    <el-button type="success" @click="handleEdit(scope.row)" size="mini">修改</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background style="float: right;margin-top: 20px; margin-bottom: 22px"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="page.pageSize"
            :page-sizes="[5, 8, 10, 15, 20, 30]" layout="total, sizes, prev, pager, next, jumper"
            :total="page.totalCount">
        </el-pagination>
    </div>
</template>

<script>
export default {
    name: "courses",
    data() {
        return {
            editorOption: {},
            editor: {},
            dialogVisible: false,
            editVisible: false,
            visible: false,
            map: {},
            formData: {},
            list: [],
            opts: {
                isFreeList: [{
                    code: 1,
                    desc: "收费"
                }, {
                    code: 0,
                    desc: "免费"
                }],
                isPutawayList: [{
                    code: "Normal",
                    desc: "上架"
                }, {
                    code: "Draft",
                    desc: "下架"
                }]
            },
            page: {
                beginPageIndex: 1,
                currentPage: 1,
                endPageIndex: 8,
                pageCurrent: 1,
                pageSize: 5,
                totalCount: 0,
                totalPage: 0
            }
        }
    },
    created() {
        this.searchCourse()
    },
    methods: {
        // 课程分类分页列表接口
        searchCourse() {
            var that = this
            this.$http.post(`/core/course/findCourse/${this.page.pageCurrent}/${this.page.pageSize}`, this.map).then(function (resp) {
                if (resp.data.code === 200) {
                    that.list = resp.data.data.records
                    that.page.totalCount = resp.data.data.total
                    that.page.pageSize = resp.data.data.size
                }
            })
        },
        //提交修改的表单
        submitForm() {
            console.log(this.formData)
            var that = this
            this.$http.post(`/core/course/updateCourse`, this.formData).then(function (resp) {
                if (resp.data.code === 200) {
                    that.$message.success(resp.data.msg);
                    that.visible = false
                }else {
                    that.$message.error(resp.data.msg);
                    that.visible = false
                }
            })
        },
        //查询
        handleCheck() {
            this.searchCourse()
        },
        // 重置查询条件
        handleReset() {
            this.reload()
        },
        handleSizeChange(val) {
            this.page.pageSize = val
            this.searchCourse()
        },
        handleCurrentChange(val) {
            this.page.pageCurrent = val
            this.searchCourse()
        },
        // 刷新当前页面
        reload() {
            this.map = {}
            this.formData = {}
            this.searchCourse()
        },
        // 关闭编辑弹窗回调
        closeCllback() {
            //this.dialogVisible = false;
            //this.editVisible = false;
            this.visible = false;
            this.$refs.formDataRef.resetFields();
            this.reload()
        },
        // 修改上下架状态
        handleChangeIsPutaway(id, status) {
            const title = { "Draft": '下架', "Normal": '上架' }
            this.$confirm(`确定要${title[status]}吗?`, {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.changeIsPutaway(id, status)
            }).catch(() => {
                this.reload()
            })
        }
        ,
        // 请求更新上下架方法
        changeIsPutaway(id, status) {
            var that = this
            this.$http.post(`/core/course/changeStatus`, { "id": id, "status": status }).then(function (resp) {
                if (resp.data.code === 200) {
                    that.$message.success(resp.data.msg);
                }
                that.reload()
            })
        },
        // 修改弹窗
        handleEdit(row) {
            this.formData = row
            this.visible = true
        },
        textClass(isFree) {
            return {
                c_red: isFree === 0,
                c_blue: isFree === 1
            }
        },
    }

}
</script>

<style scoped>

</style>
